<!--
 * @Author: sick cell 11238056+zhaoziyin@user.noreply.gitee.com
 * @Date: 2022-07-29 09:14:59
 * @LastEditors: 你的名字或昵称 你的邮箱
 * @LastEditTime: 2022-08-05 11:07:32
 * @FilePath: \网易严选d:\桌面\shixun3\begin\day11\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网易严选</title>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./font_3546365_wep2hse4akh/iconfont.css" />
    <link rel="stylesheet" href="./iconfont/font_3546365_yfhi7hzapnn/iconfont.css">
  </head>
  <body>
    <!-- 顶部开始 -->
    <div class="title">
      <div class="title_container">
        <ul>
          <li><a href="#">登录/注册</a></li>
          <li><a href="#">我的订单</a></li>
          <li><a href="#">会员</a></li>
          <li><a href="#">甄选家</a></li>
          <li  class="combox">
            <a href="#">企业采购</a>
            <div class="company">
              <ul>
                <li>企业购</li>
                <li>员工福利</li>
                <li>礼品卡</li>
                <li>联系我们</li>
              </ul>
            </div>
          </li>
          <li class="cusbox">
            <a href="#">客户服务</a>
            <div class="custmer">
              <ul>
                <li>企业购</li>
                <li>员工福利</li>
                <li>礼品卡</li>
                <li>联系我们</li>
              </ul>
            </div>
          </li>
          <li><a href="#">APP</a></li>
        </ul>
      </div>
    </div>
    <!-- 顶部结束 -->
    <!-- logo和列表搜索框开始 -->
    <div class="container">
      <div class="container_parent">
        <div class="top">
          <!-- logo -->
          <div class="logo"></div>
          <div class="search_box">
            <div class="search">
              <div class="left">
                <input type="text" placeholder="杭州游礼" />
              </div>
              <div class="right">搜索</div>
            </div>
            <div class="nav_sear_frame">
              <ul>
                <li><a href="">咖啡</a></li>
                <li style="font-weight: 100">|</li>
                <li><a href="">纸巾</a></li>
                <li style="font-weight: 100">|</li>
                <li><a href="">猫粮</a></li>
                <li style="font-weight: 100">|</li>
                <li><a href="">口罩</a></li>
                <li style="font-weight: 100">|</li>
                <li><a href="">蓝牙耳机</a></li>
                <li style="font-weight: 100">|</li>
                <li><a href="">牙刷</a></li>
                <li style="font-weight: 100">|</li>
                <li><a href="">锅</a></li>
                <li style="font-weight: 100">|</li>
                <li><a href="">女鞋</a></li>
                <li style="font-weight: 100">|</li>
                <li><a href="">收纳</a></li>
              </ul>
            </div>
          </div>
          <div class="buy">
            <span class="nav_shopcar_logo">
              <i class="iconfont icon-gouwuche"></i>
            </span>
            <span class="nav_shopcar_name">购物车</span>
            <span class="nav_shopcar_num">0 </span>
          </div>
        </div>
        <div class="bottom">
          <ul>
            <li>
              <a href="" title="首页">首页</a>  
            </li>
            <li>
              <a href="" title="居家生活">居家生活</a>
              <div>
                <!-- 二级列表标签 -->
                <dl>
                  <dd>
                    <a href="#">我的</a>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                  </dd>
                  <dd>帮助</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                </dl>
              </div>
            </li>
            <li>
              <a href="" title="宠物生活">宠物生活</a>
              <div>
                <!-- 二级列表标签 -->
                <dl>
                  <dd>
                    <a href="#">我的</a>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                  </dd>
                  <dd>帮助</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                </dl>
              </div> 
            </li>
            <li>
              <a href="" title="服饰鞋包">服饰鞋包</a>
              <div>
                <!-- 二级列表标签 -->
                <dl>
                  <dd>
                    <a href="#">我的</a>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                  </dd>
                  <dd>帮助</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                </dl>
              </div>
            </li>
            <li>
              <a href="" title="美食酒水">美食酒水</a>
              <div>
                <!-- 二级列表标签 -->
                <dl>
                  <dd>
                    <a href="#">我的</a>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                  </dd>
                  <dd>帮助</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                  <dd>其他</dd>
                </dl>
              </div>
            </li>
            <li>
              <a href="" title="个护清洁">个护清洁</a>
            </li>
            <li>
              <a href="" title="母婴亲子">母婴亲子</a>
            </li>
            <li>
              <a href="" title="运动旅行">运动旅行</a>
              
            </li>
            <li>
              <a href="" title="数码家电">数码家电</a>
              
            </li>
            <li>
              <a href="" title="严选全球">严选全球</a>
              
            </li>
            <li><a href="" title="为你严选">为你严选</a></li>
            <li><a href="" title="众筹">众筹</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- logo和列表搜索框结束 -->
    <!-- 大图开始 -->
    <div class="swipe">
      <div class="swipe_img">
        <img src="./image/首页大图.jpg" alt="" />
      </div>
    </div>
    <!-- 大图结束 -->

    <!-- 侧边栏开始 -->
    <aside class="left">
      <div class="body_aside_left">
        <ul>
          <li>— 热销榜 —</li>
          <li>
            <i class="iconfont icon-paixingbang"></i>
            <a href="" style="color: rgb(187, 51, 67); font-weight: 700"
              >全站<br />热销榜</a
            >
          </li>
          <li>
            <i class="iconfont icon-xiyiji"></i>
            <a href="">居家<br />生活榜</a>
          </li>
          <li>
            <i class="iconfont icon-Txu"></i>
            <a href="">服饰<br />鞋包榜</a>
          </li>
          <li>
            <i class="iconfont icon-jiushui"></i>
            <a href="">美食<br />酒水榜</a>
          </li>
          <li>
            <i class="iconfont icon-xiangji"></i>
            <a href="">数码<br />家电榜</a>
          </li>
          <li>
            <i class="iconfont icon-maojin"></i>
            <a href="">个护<br />清洁榜</a>
          </li>
          <li>
            <i class="iconfont icon-hanglixiang"></i>
            <a href="">运动<br />旅行榜</a>
          </li>
          <li>
            <i class="iconfont icon-yingerche"></i>
            <a href="">母婴<br />亲子榜</a>
          </li>
          <li>
            <i class="iconfont icon-gift"></i>
            <a href="">全球<br />特色榜</a>
          </li>
        </ul>
      </div>
    </aside>
    <aside class="right">
      <div class="body_aside_code">
        <img src="./image/smallcode.png" alt="" />
      </div>
      <div class="aside_right_text">
        <p>扫码领</p>
        <p>新人APP<br />大额红包</p>
      </div>
      <div class="aside_right_subs">
        <i class="iconfont icon-dingyue"></i>
        <p>订阅电子刊</p>
      </div>
      <div class="aside_right_online">
        <i class="iconfont icon-zaixiankefu"></i>
        <p>在线客服</p>
      </div>
      <div class="aside_right_top" id="back">
        <i class="iconfont icon-huidaodingbu"></i>       
        <p><a href="#">回顶部</a></p>
      </div>
    </aside>

    <!-- 新品首发开始 -->
    <div class="cube">
      <div class="cube_parent">
        <div class="top">
          <div>
            <h3>新品首发</h3>
            <span>为世间寻觅好物</span>
            <span>更多新品></span>
          </div>
        </div>
        <div class="bottom">

          <div>
            <div class="pic"></div>
            <div class="text">
              <div>today</div>
              <div>nonono</div>
              <div>
                <span>￥49</span>
                <span>￥199</span>
              </div>
            </div>
          </div>  
          <div>
            <div class="pic"></div>
            <div class="text">
              <div>NANA</div>
              <div>broken-rose</div>
              <div>
                <span>￥49</span>
                <span>￥199</span>
              </div>
            </div>
          </div>
          <div>
            <div class="pic"></div>
            <div class="text">
              <div>nottoday</div>
              <div>luv 2 sic</div>
              <div>
                <span>￥49</span>
                <span>￥199</span>
              </div>
            </div>
          </div>
          <div>
            <div class="pic"></div>
            <div class="text">
              <div>22222</div>
              <div>120220801</div>
              <div>
                <span>￥49</span>
                <span>￥199</span>
              </div>
            </div>
          </div>
          <div class="body_right_btn">
            <i class="iconfont icon-youbian"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 新品首发结束 -->

    <!-- 人气推荐开始 -->
    <div class="body_content_two" id="recommend">
      <!-- 标题 -->
      <div class="content_two_text">
        <h3>人气推荐</h3>
        <a href="#">编辑推荐</a>
        <a href="#">热销总榜</a>
        <a href="#">更多推荐 > </a>
      </div>
      <!-- 商品 -->
      <div class="body_content_popular">
        <div class="content_popular_left">
          <img src="./image/推荐1.webp" alt="" />
          <h4>君乐宝简醇无蔗糖酸奶0蔗糖网</h4>
          <h4>红非脱脂佐餐</h4>
          <span>￥20.9</span>
          <span>￥22.9</span>
        </div>
        <div class="content_popular_right">
          <div>
            <img src="./image/推荐2.webp" alt="" />
            <p>能除臭的空气浴窒香氛</p>
            <p>13种香型选择</p>
            <span>￥14.9</span>
            <span>￥19.9</span>
          </div>
          <div>
            <img src="./image/推荐3.webp" alt="" />
            <p>湿擦更干净，屁屁更舒</p>
            <p>爽可冲散湿厕纸</p>
            <span>￥3.5</span>
            <span>￥4.9</span>
          </div>
          <div>
            <img src="./image/推荐4.webp" alt="" />
            <p>脆皮多肉肠(原味)25</p>
            <p>0克/袋</p>
            <span>￥19</span>
            <span>￥22</span>
          </div>
          <div>
            <img src="./image/推荐5.webp" alt="" />
            <p>清新英国梨香强力去污</p>
            <p>酵素洗衣液3kg/1kg</p>
            <p>￥35</p>
          </div>
          <div>
            <img src="./image/推荐6.webp" alt="" />
            <p>[2盒】咖啡饼干意式</p>
            <p>340克+美式340克</p>
            <p>￥38</p>
          </div>
          <div>
            <img src="./image/推荐7.webp" alt="" />
            <p>告别啃食尴尬，秘制无</p>
            <p>骨凤爪藤椒味108克</p>
            <span>￥19</span>
            <span>￥22</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 人气推荐结束 -->

    <!-- 居家生活开始 -->
    <div class="body_content_living">
      <div class="content_living_text">
        <h3>居家生活</h3>
        <a href="#">办公椅/工学椅</a>
        <span>/</span>
        <a href="#">四季款</a>
        <span>/</span>
        <a href="#">秋冬款</a>
        <span>/</span>
        <a href="#">床垫床褥</a>
        <span>/</span>
        <a href="#">经典人气系列</a>
        <span>/</span>
        <a href="#">被子/被芯</a>
        <span>/</span>
        <a href="#">休闲椅/凳</a>
        <a href="#">查看更多 > </a>
      </div>
      <div class="content_living_up">
        <div><img src="./image/居家1.webp" alt="" /></div>
      </div>
      <div class="content_living_down">
        <div>
          <img src="./image/居家2.webp" alt="" />
          <p>女式天丝棉柔中腰小脚裤</p>
          <span>￥99</span><span>￥199</span>
        </div>
        <div>
          <img src="./image/居家3.webp" alt="" />
          <p>玩趣彩虹四季拖鞋</p>
          <span>￥24.9</span>
          <span></span>
        </div>
        <div>
          <img src="./image/居家4.webp" alt="" />
          <p>32功能区格，男式商务出行</p>
          <p>机能双肩包</p>
          <span>￥299</span><span>￥349</span>
        </div>
        <div>
          <img src="./image/居家5.webp" alt="" />
          <p>妥帖包裹，男式基础平角内</p>
          <p>裤2条/4条装</p>
          <span>￥59</span>
          <span></span>
        </div>
      </div>
    </div>
    <!-- 居家生活结束 -->

    <!-- 大家都在说 -->
    <div class="people_box">
      <div class="top">
        <h3>大家都在说</h3>
        <small>生活，没有统一标准</small>
      </div>
      <div class="bottom">
        <div>
          <div>
            <img src="./image/说1.webp" alt="">
            <div>明天星期四</div>
          </div>
          <div>
            <img src="./image/说2.webp" alt="">
            <div></div>
          </div>
          <div>
            <img src="./image/说3.webp" alt="">
            <div></div>
          </div>
          <div>
            <img src="./image/说4.webp" alt="">
            <div></div>
          </div>
          <div>
            <img src="./image/说5.webp" alt="">
            <div></div>
          </div>
          <div>
            <img src="./image/说1.webp" alt="">
            <div></div>
          </div>
        </div>
      </div>
      <div class="right_btn">
        <i class="iconfont icon-youbian"></i>
      </div>
    </div>

    <!-- 白色底部开始 -->
    <div class="foot">
      <div class="cus"> 
        <div class="bottom">     
          <h4>客户服务</h4> 
        <div>
          <i class="iconfont icon-zaixiankefu"></i>
          <br>
          <a href="#">在线客服</a>
        </div>
        <div>
          <i class="iconfont icon-yonghufankui"></i>
          <br>
          <a href="#">用户反馈</a>
        </div>
      </div>
      </div>
      <div class="details">
        <div class="top">
          <h4>何为网易严选</h4>
          <p>网易严选是深受新中产喜爱的生活方式品牌,为消费者</p>
          <p>提供一站式、全品类、全方位的美好生活解决方案。我</p>
          <p>们通过简约、实用、舒适的美学设计，不断带来高品质</p>
          <p>灵感好物,陪伴3000万新中产用户「活出自己喜欢的样</p>
          <p>子」，共同倡导多元化的生活价值主张——每个人都可</p>
          <p>以把生活的选择权交还给自己。</p>
        </div>
        <div class="bottom">
          <span>关注我们：</span>
          <i class="iconfont icon-weibo1"></i>
          <i class="iconfont icon-weixin"></i>
          <i class="iconfont icon-douyin"></i>
        </div>
      </div>
      <div class="download">
        <h4>扫码下载严选APP</h4>
        <div><img src="./image/canvas.png" alt=""></div>
        <div>下载领大额新人红包</div>
      </div>
    </div>

    <!-- 黑色底部开始 -->
  <footer>
      <div class="top">
        <div>
          <i class="iconfont icon-pinpai"></i>
          <span>网易自营电商</span>
        </div>
        <div>
          <i class="iconfont icon-tuihuobaozhang"></i>
          <span>30天无忧退换货</span>
        </div>  
        <div>
          <i class="iconfont icon-baoyou"></i>
          <span>满99元免邮费</span>
        </div>
        <div>
          <i class="iconfont icon-pinzhigongyingshang"></i>
          <span>品质保证</span>
        </div>
      </div>
      <div class="bottom">
        <div class="text">         
          <span><a href="">关于我们</a></span>
          <span><a href="">帮助中心</a></span>
          <sapn><a href="">售后服务</a></span>
          <span><a href="">配送与验收</a></span>
          <span><a href="">商务合作</a></span>
          <span><a href="">开放平台</a></span>
          <span><a href="">搜索推荐</a></span>
          <span><a href="">友情链接</a></span>
          <span><a href="">廉正举报</a></span>        
        </div>
        <div>
食品经营许可证: Y1308011719 出版动经营许可证:新出发滨字第012号妙得CP和号:ICP证浙920650106浙杭食药监格经营备2071029号营业执照网易公司版权所有◎1997-202
        </div>
        <div>
无线电发射设备销售备案:4220201096855互联网药品信息服务资格证:(浙)-经营性-2022-0075。医疗器械网络交易第三方平台备案:(浙)）网械平台备字[2020第00029号
        </div>
        <div>
(浙杭）网械企备字[2019]第00119号(粤)网械平台备字(2019）第00004号(粤)-非经营性-2016-0023进口冷链食品管理承诺书      
        </div>
        <div>
食品经营许可证:JY14207050007694浙江省网络食品销售第三方平台提供者备案:浙网食A33010009单用途商业预付卡备案证:330100AAC004 </div>
<div>出版物网络交易平台服务经营备案:新出发浙备字第2021006号
        </div>
     </div>
      
  </footer>
    <!-- 黑色底部结束 -->
  </body>
  <script>
    var high=document.querySelector('#recommend');
    var highone = document.querySelector('#back');
    

    highone.addEventListener('click',function(){
      animate(window,0);
    })
    
    document.addEventListener('scroll',function(){
      if(window.pageYOffset>=high.//offsetParent：获取带有定位的最近父元素
      offsetTop){
        highone.style.display='block';
      }else {
        highone.style.display='none';
      }
    })



      //动画函数
  function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      // 步长值写到定时器的里面
      // 把步长值改为整数,不要出现小数的问题
      var step = (target - window.pageYOffset) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      if (window.pageYOffset == target) {
        clearInterval(obj.timer);
        // 回调函数位置：定时器结束的位置
        if (callback) {
          // 调用函数
          callback();
        }
      }
      // 把每次步长值给为逐渐变小的值(目标值-现在位置/10)
      // obj.style.left = window.pageYOffset + step + 'px';
      window.scroll(0, window.pageYOffset + step);
    }, 15);
  }

  </script>
</html>

